<template>
  <!-- 头部 -->
 <div class="nav">
  <van-icon name="arrow-left" @click="$router.push('/home')"></van-icon>
    <van-search v-model="value" shape="round"  placeholder="请输入搜索关键字" @click="$router.push('/search')">
    </van-search>
    <p @click="$router.push('/search')">搜索</p>
  </div>

<!-- 热门搜索 -->
<div class="title">
<h5>热门搜索</h5>
<h5 @click="isShowHot">{{show ? '隐藏':'显示'}}</h5>
</div>
<div class="hot" v-show="show">
  <van-tag 
  plain 
  type="primary" 
  v-for="item in hotArr" 
  :key="item.wordid"
  >
  {{item.keyword}}
</van-tag>

</div>
 
</template>

<script lang='ts' setup>
import {ref} from 'vue'
import { showNotify, closeNotify } from 'vant';
import{getHotData} from '@/api/search'


const show=ref<boolean>(true)
const isShowHot = ()=>{
  show.value = !show.value
}
// 搜索关键字
const value = ref<string>('')
// 消息提示
showNotify({
  message: '热门搜索',
  color: 'white',
  background: '#58be6a',
  duration: 1000,
});

const hotArr = ref<Array<{
  keyword:string,
  wordid:string
}>>([])
// 热门搜索

getHotData().then(res=>{
  console.log('热门搜索res',res);
  if(res.data.code == 200){
    hotArr.value = res.data.data
    console.log('hotArr',hotArr.value);
  }
})




</script>
 
<style lang='scss' scoped>
.nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
  .van-search{
    width: 85%;
  }
  p{
    font-size: 15px;
  };
}
.van-tag {
  margin: 10px;
  color:red;
}
.hot {
  margin-left: 10px;
}
.title{
  display: flex;
  justify-content: space-between;
  padding:0 10px;
  h5:nth-of-type(2){
    color: darkgrey;
  }
}
</style>
